<template>
  <div>
    <!-- 头部搜索 -->
    <div class="dskt_nav_bar">
      <div class="bar_span bar_left">
        <img @click="searchEnterEvent" :src="'./static/img/icon_search.png'">
      </div>
      <div class="bar_center">
        <input
          type="text"
          class="base_input"
          v-model="searchData.searchKey"
          @keyup.enter="searchEnterEvent"
           ref="inputText" 
               @input="searchInputEvent" 
          placeholder="姓名、学号、考核单号、开单编号"
        >
      </div>
    </div>
    <!--end 头部搜索 -->
    <div class="list_title">
      <span class="green_span_title">
        查询到
        <span class="span_num">{{dataNum}}</span>考核单记录
      </span>
    </div>
    <!-- 滚动数据div -->
    <div class="scrollerWrap">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
        <swipeout>
          <swipeout-item
            @on-close="handleEvents('on-close')"
            @on-open="handleEvents('on-open')"
            transition-mode="follow"
            v-for="(order,index) in dataList"
            :key="index"
          >
            <div slot="right-menu" v-if="order.checkState==1">
              <swipeout-button
                v-if="order.canBack && loginUserId==order.openOrderUserId"
                @click.native="onCehuiClick(order.id)"
                type="warn"
              >撤回</swipeout-button>
              <swipeout-button
                v-if="!order.canBack"
                @click.native="onCexiaoClick(order.id)"
                type="warn"
              >撤消</swipeout-button>
            </div>
            <div
              slot="content"
              class="green-box kaidan_box vux-1px-t click_to_green"
              @click="toEdit('update',order.id)"
            >
              <div class="kaidan_box_top">
                <flexbox :gutter="0">
                  <flexbox-item :span="6/10" class="user_group_div">
                    <p class="name">{{ order.studentName}}</p>
                    <p class="time">{{ order.studentNo}}&nbsp;&nbsp;<span>{{order.showAddress}}</span></p>
                  </flexbox-item>
                  <flexbox-item :span="4/10" align="right">
                    <p class="status">{{ order.statusText }}</p>
                    <p class="time">{{ order.showTimeStr}}</p>
                  </flexbox-item>
                </flexbox>
              </div>
              <ul class="kaidan_buttom click_to_green">
                <li class="right_li">
                  <span
                    class="border_radus"
                    :class="[order.scoringType==1 ? 'color_green' : 'color_red']"
                  >{{ order.scoringType==1 ? '+'+order.points : '-' +order.points }}分</span>
                  {{order.checkBigCateName}}-{{order.checkItemName}}
                     <span
                class="zuoqinag_span"
              >{{order.appropriateExplain}}</span>
                </li>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
      </scroller>
    </div>
    <!-- 选择原因 -->
    <selectReason @okEvent="selectReasonOkEvent" :nama="123" ref="selectReason"></selectReason>
  </div>
</template>

<script>
import orderService from "../../shared/service/orderService";
import baseService from "../../shared/service/baseService";
import selectReason from "../../components/selectReason.vue";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { Swipeout, SwipeoutItem, SwipeoutButton, dateFormat } from "vux";
export default {
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    dateFormat,
    selectReason
  },
  data() {
    var data = {
      dataNum: 0,
      loginUserId: this.$cookie.getUserId(),
      showRightMenu: false,
      selectKdStatus: "",
      selectKdTimeType: "",
      dataList: [],
      searchData: {
        searchKey: "",
        startTime: "",
        endime: ""
      }
    };

    data.dataPage = {
      pageNum: 0,
      pages: 0
    };

    return data;
  },
  mounted() {
    //页面滚动给顶部的搜索栏添加一个样式
    $(".view-router").on("scroll", function() {
      if ($(this).scrollTop() >= 100) {
        $(".dskt_nav_bar").addClass("bar_sroll");
      } else {
        $(".dskt_nav_bar").removeClass("bar_sroll");
      }
    });
    this.doSearchData(1);
     weixinService.initWx(wx);
  },
  methods: {
    //搜索事件
    searchEnterEvent(type) {
      this.$refs.inputText.blur();
      this.doSearchData(1);
    },
         //输入框点击事件
    searchInputEvent() {
         this.doSearchData(1);
    },
    //
    onCehuiClick(id) {
      this.$refs.selectReason.showCehui(id);
    },
    onCexiaoClick(id) {
      this.$refs.selectReason.showCexiao(id);
    },
    selectReasonOkEvent(id, text, type) {
      var recallType = 1;
      if (type == "cehui") {
        recallType = 2;
      } else if (type == "cexiao") {
        recallType = 1;
      }
      orderService.doBackCheckOrder(id, text, recallType, 2).then(res => {
          if(type=='cehui'){
                this.$vux.toast.text("已撤回");
            }else{
                this.$vux.toast.text("已撤消");
            }
        for (let i = 0; i < this.dataList.length; i++) {
          let po = this.dataList[i];
          if (po.id == id) {
            var resPo =  this.dealData(res.data);
            this.dataList[i].statusText=resPo.statusText;
            this.dataList[i].checkState=resPo.checkState;
            this.dataList[i].showTimeStr=resPo.showTimeStr;
            break;
          }
        }
      });
    },
    //列表-编辑 , 开单按钮
    toEdit(viewType, id) {
      this.$router.push({
        name: "check_order_detail",
        query: { viewType: viewType, id: id }
      });
    },
    handleEvents(type) {
      console.log("event: ", type);
    },
    doSearchData(page, fn) {
      var param = {
        searchKey: this.searchData.searchKey,
        openOrderUserId:this.$cookie.getUserId()
      };
      param = this.$cookie.setUserData(param);

      orderService.getCheckOrderPage(page, param).then(res => {
        var data = res.data;
        this.dataPage.pageNum = page;
        this.dataPage.pages = data.pages;
        this.dataNum = data.total;
        for (let i = 0; i < data.list.length; i++) {
          let po = data.list[i];
          po = this.dealData(po);
        }
        if (page == 1) {
          this.dataList = data.list;
        } else {
          this.dataList = this.dataList.concat(data.list);
        }
        if (fn) fn();
      });
    },
    dealData(po) {
      switch (po.checkState) {
        case 0:
          po.statusText = "撤回";
          break;
        case 1:
          po.statusText = "生效";
          break;
        case 2:
          po.statusText = "撤消";
          break;
      }
      po.showTimeStr = dateFormat(this.$commonUtil.getDate(po.stateTime), "YYYY-MM-DD HH:mm");
      console.log(po);
      po.showAddress = this.$commonUtil.getUserAddress(po);
      return po;
    },
    //下拉刷新
    refresh(done) {
      this.doSearchData(1, done);
    },
    //下拉刷新
    infinite(done) {
      console.log("触发下拉-=------------");
      if (
        this.dataPage.pages > 0 &&
        this.dataPage.pages <= this.dataPage.pageNum
      ) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      if (this.dataPage.pages == 0) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      this.doSearchData(this.dataPage.pageNum + 1, done);
    }
    
  }
};
</script>
<style scoped>
@import "../../assets/scss/home.scss";
</style>
<style scoped>
.right_li {
  padding-top: 8px;
  font-size: 14px;
}

.user_group_div {
  font-size: 16px;
  color: #111;
  border-right: 1px soild #f4f4f4;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bar_sroll {
  border-bottom: 1px solid #e3e3e3;
}
.view-router {
  padding-top: 43px;
}
.right_menu_div {
  width: 280px;
  background: white;
  height: 100%;
}
.menu_buttom_group {
  position: absolute;
  bottom: 20px;
  padding: 0 15px;
  box-sizing: border-box;
}
.scrollerWrap {
  position: absolute;
  width: 100%;
  top: 75px;
  bottom: 51px;
}
</style>
